<template>
	<div class="app-container">
		<!-- 用户绑定微信openId表-管理按钮 -->
		<div class="search-bar">
			<el-input v-model="searchData.bindId"
					  		 placeholder="请输入主键查询"/>
			<el-input v-model="searchData.userId"
					  		 placeholder="请输入用户id查询"/>
			<el-input v-model="searchData.wxOpenId"
					  		 placeholder="请输入微信openid查询"/>
			<el-button v-waves  type="primary" size="small"
                 icon="el-icon-search" @click="searchBtnHandle">查询</el-button>
			<el-button v-waves  type="info" size="small"
                 icon="el-icon-refresh" @click="resetTableList">显示全部</el-button>
			<div style="float: right;">
				<el-button v-waves type="primary" icon="el-icon-plus" @click="openAdd" size="small"
                   v-permission="'jtnc-bind-krBind-add'">新增
				</el-button>
				<el-button v-waves type="info" icon="el-icon-edit" @click="openUpdate(null)" size="small"
                   v-permission="'jtnc-bind-krBind-update'">修改
				</el-button>
				<el-button v-waves type="danger" icon="el-icon-delete" @click="deleteByIds(null)" size="small"
                   v-permission="'jtnc-bind-krBind-delete'">删除
				</el-button>
				<el-upload v-permission="'jtnc-bind-krBind-importExcel'" style="display: inline-block;margin: 0px 10px;"
						   :action="$baseServer+'/jtnc/bind/krBind/import/excel'" :headers="$store.getters.headerToken"
						   :on-success="importExcelSuccess" accept=".xls,.xlsx"
						   :show-file-list="false" :auto-upload="true">
					<el-button v-waves type="warning" icon="el-icon-upload2" size="small">批量导入</el-button>
				</el-upload>
				<el-button v-waves type="success" icon="el-icon-printer" @click="exportExcel" size="small"
						   v-permission="'jtnc-bind-krBind-exportExcel'">批量导出
				</el-button>
			</div>
		</div>
		<!-- 用户绑定微信openId表-列表 -->
		<el-table ref="dataTable" :data="tableData" stripe border @selection-change="handleTableSelectChange" v-loading="isLoading">
			<el-table-column type="selection" width="50" align="center" header-align="center"/>
			<el-table-column label="主键" prop="bindId" align="center"/>
			<el-table-column label="用户id" prop="userId" align="center"/>
			<el-table-column label="微信openid" prop="wxOpenId" align="center"/>
			<el-table-column fixed="right" label="操作" width="120" align="center">
				<template v-slot="scope">
					<el-button type="text" style="color: #13ce66;"
							   size="small" @click="openView(scope.row)">详情</el-button>
					<el-button v-permission="'jtnc-bind-krBind-update'"
							   type="text" size="small" @click="openUpdate(scope.row)">修改
					</el-button>
					<el-button v-permission="'jtnc-bind-krBind-delete'" style="color: #ff6d6d;"
							   type="text" size="small" @click="deleteByIds(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 用户绑定微信openId表-分页 -->
		<el-pagination style="text-align: center;margin-top:10px;" layout="total,prev,pager,next,sizes,jumper"
                   :page-size="pager.limit" :current-page="pager.page"
                   :total="pager.totalCount" @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
		/>
		<!-- 添加修改弹窗 -->
		<el-dialog :title="titleMap[dialogType]" :close-on-click-modal="dialogType !== 'view' ? false : true"
				   :visible.sync="dialogFormVisible" @close="resetTemp" width="800px" :key="'myDialog'+dialogIndex">
			<el-form ref="dataForm" :model="temp" label-position="right" label-width="100px" :disabled="dialogType==='view'">
				<el-form-item label="主键" prop="bindId"
                      :rules="[{required: true, message: '主键不能为空'}]">
					<el-input v-model="temp.bindId" placeholder="请输入主键"/>
				</el-form-item>
				<el-form-item label="用户id" prop="userId"
                      :rules="[]">
					<el-input v-model="temp.userId" placeholder="请输入用户id"/>
				</el-form-item>
				<el-form-item label="微信openid" prop="wxOpenId"
                      :rules="[]">
					<el-input v-model="temp.wxOpenId" placeholder="请输入微信openid"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button v-waves type="primary" v-if="dialogType!=='view'" @click="saveData">保存</el-button>
				<el-button v-waves @click="dialogFormVisible=false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import waves from '@/directive/waves'
import crudMixin from "@/mixin/crudMixin";

export default {
  directives: {waves},
   mixins: [crudMixin],
  data() {
    return {
      url: {
        list: "/jtnc/bind/krBind/list",
        add: "/jtnc/bind/krBind/add",
        info: "/jtnc/bind/krBind/getById",
        update: "/jtnc/bind/krBind/update",
        delete: "/jtnc/bind/krBind/delete",
        export:"/jtnc/bind/krBind/export/excel"
      },
    }
  },
  created() {
    this.loadTableList();
    this.resetTemp();
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
.search-bar {
  margin-bottom: 10px;
  ::v-deep {
    .el-input,
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 5px;
    }
  }
}
</style>